A Case Study on Vue's Re-design.
Background
Now Comms Asia is an events agency and Vue is a web-based events platform that provides an end-to-end service for organisations/individuals to run events via a Content-Management System (CMS). What would usually take 2-3 different platforms can all be done within Vue. Registration, ticketing, streaming, attendee management, customization and analytics are just some of the main functions Vue provides.
Vue is a very complex endeavour, since it aims to serve many functions, most of which are not beginner friendly. One of the first problems I wanted to solve was the navigation (and broadly the information hierarchy) of the web app.
My role
UI/UX Design, Wireframing, User Flows and User Research
Tools and Methods
I used Adobe XD to wireframe, design and prototype and used Card Sorting and Tree Testing for research and validation.
When I was brought on to this project, there was already an up-and-running version of it. However, the platform was designed with no designer involved. Vue had its basic functionalities working, but the app was unusable.
The only people who would be able to use it properly were the ones who built it. So rather than design an app from scratch, I would actually be re-designing one that already existed.
With the app being so complex with its many functionalities, where do we begin? We already knew our users: event organisers and runners.
The old navigation was hard to use as a result of many factors. Poor naming, unclear naming and icon usage made the platform hard to navigate as a new user. As a CMS, navigating the site is important so users will know where they need to go to make changes.
Tackling the navigation
We decided to adopt Card Sorting as a method to decide how we were going to restructure the navigation. Luckily for us, our company was filled with people we were designing the platform for: event planners and runners.
We printed out cards representing the main content on the site, which in this case, was mostly functions. We wanted to uncover what functions our users expected to be found together.
The results we got from each card sort were pretty consistent. They grouped the pages together chronologically. For the duration of an event, there are usually 3 phases.
Pre Event, During The Event and Post-Event, which is the mental model most of our testers had. Based on this, we came up with a new navigation:
We included a top navigation to represent the phases of an event. We also updated the icons to more appropriate ones using Material Symbols.
To further validate our decisions, we also carried out Tree Testing. We did the testing with event runners and did follow up interviews to understand their thought processes, which helped us further understand the way they thought.
